<!--组织管理-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="13" style="height : 635px;overflow : auto;">
        <el-card shadow="always">
          <el-form :inline="true" :model="vo" ref="zuzhiFrom" class="demo-form-inline">
            <el-form-item label="组织名称:" prop="name">
              <el-input v-model="vo.name" placeholder="组织名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="el">搜索</el-button>
              <el-button icon="el-icon-refresh" @click="resetForm('zuzhiFrom')">重置</el-button>
              <el-dropdown>
                <el-button>
                  更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="insertButton">添加</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteButton">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-form-item>
          </el-form>
          <el-tree
            v-if="refreshTable"
            :data="list"
            show-checkbox
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-strictly="true"
            :default-expand-all="treeCheckAll"
            @check="treeCheck"
            @node-click="handleNodeClick">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="11" style="height : 635px;overflow : auto;">
        <el-card v-if="statusBox !==-1">
          <label style="font-weight: bold" v-if="statusBox === 0">新增</label>
          <label style="font-weight: bold" v-if="statusBox === 1">修改</label>
          <el-divider></el-divider>
          <el-form :model="treeData" ref="aggFrom" label-width="100px">

            <el-form-item label="组织名称" prop="name" :rules="[{ required: true, message: '请输入组织名称', trigger: 'blur' }]">
              <el-input v-model="treeData.name"></el-input>
            </el-form-item>

            <el-form-item label="组织类型：" prop="orgType">
              <el-select style="width:100%" placeholder="组织类型" v-model="treeData.orgType">
                <el-option
                  v-for="arrdata in selectData"
                  :label="arrdata.value"
                  :value="arrdata.key"
                  :key="arrdata.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="地址：" prop="orgType">
              <el-cascader
                style="width:100%"
                ref="addres"
                v-model="selectValue"
                :options="addressesSelect"
                :props="{expandTrigger: 'hover'}"
                filterable
                clearable
                @change="refreshStatus">
              </el-cascader>
            </el-form-item>

            <el-form-item label="详细地址" prop="address"
                          :rules="[{ required: true, message: '请输入详细地址', trigger: 'blur' }]">
              <el-input style="width: 170px;" v-model="selectAddrText" disabled></el-input>
              +
              <el-input style="width:240px;" v-model="treeData.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contractNumber">
              <el-input v-model="treeData.contractNumber"></el-input>
            </el-form-item>
            <el-form-item label="简称" prop="abbreviation">
              <el-input v-model="treeData.abbreviation"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="orgDescribe">
              <el-input v-model="treeData.orgDescribe"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="treeData.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" prop="sortValue">
              <el-input-number :min="0" label="序号" v-model="treeData.sortValue"></el-input-number>
            </el-form-item>
          </el-form>
          <el-divider></el-divider>

          <div style="text-align: center">
            <el-button type="danger" v-if="statusBox === 0" @click="addButton">新增</el-button>
            <el-button type="danger" v-if="statusBox === 1" @click="updateButton">修改</el-button>
          </div>

        </el-card>
        <el-card v-if="statusBox === -1">
          <el-result icon="info" title="组织管理" subTitle="添加，修改操作！"></el-result>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import organizationAPI from "../../api/rightsmanagement/organizationmanagement/organization";

export default {
  data() {
    return {
      vo: {
        name: null,
      },
      list: [], // 树数据
      defaultProps: { // 树规则
        children: 'orgTreeDtoList',
        label: 'name'
      },
      statusBox: -1, // 修改添加和默认切换
      treeData: { // 添加修改数据
        id: null,
        parentId: null,
        name: null,
        orgType: null,

        provinceId: null,
        cityId: null,
        countyId: null,

        address: null,
        contractNumber: null,
        abbreviation: null,
        orgDescribe: null,
        status: 1,
        sortValue: 0,
      },
      selectData: [
        {"key": 1, "value": "公司"},
        {"key": 2, "value": "一级转运中心"},
        {"key": 3, "value": "二级转运中心"},
        {"key": 4, "value": "网点"},
      ],
      addressesSelect: [], // 级联菜单数据
      selectValue: [], // 保存区域地址选中的值
      selectAddrText: null,// 保存选中的地址
      treeCheckAll: false,// 是否展开树
      refreshTable: true
    }
  }, methods: {
    // 获取地址选择后赋值
    getAddrSelectTextSet() {
      let textValueList = this.$refs.addres.getCheckedNodes()[0]
      if (textValueList != null) {
        // 获取选中的文本
        let textValue = textValueList.pathLabels
        this.selectAddrText = ""
        for (let i = textValue.length - 1; i >= 0; i--) {
          this.selectAddrText = textValue[i] + this.selectAddrText
        }
      } else {
        this.selectAddrText = ""
      }
    },
    // 内容改变赋值事件
    refreshStatus(obj) {
      this.getAddrSelectTextSet()
      this.treeData.provinceId = this.selectValue[0]
      this.treeData.cityId = this.selectValue[1]
      this.treeData.countyId = this.selectValue[2]
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 搜索
    el() {
      organizationAPI.getTreeData(this.vo.name).then(({data}) => {
        this.dg(data.data);
        this.list = data.data;
        // 实现树的动态展开
        if (this.vo.name == null || this.vo.name == "") {
          this.treeCheckAll = false
        } else {
          this.treeCheckAll = true
        }
        // 刷新渲染
        this.refreshTable = false;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      })
    },
    // 数据初始化
    initData() {
      // 拉取组织树的数据
      organizationAPI.getTreeData(this.vo.name).then(({data}) => {
        this.dg(data.data);
        this.list = data.data;
      })
    },
    // 级联菜单递归
    selectDg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data.length > 0) {
            if (data[i].children.length > 0) {
              this.selectDg(data[i].children)
            } else {
              delete data[i].children
            }
          }
        }
      }
    },
    // 组织树递归（添加id和name）
    dg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data[i].orgTreeDtoList.length > 0) {
            this.dg(data[i].orgTreeDtoList)
          }
          this.$set(data[i], 'name', data[i].pdCoreOrg.name)
          this.$set(data[i], 'id', data[i].pdCoreOrg.id)
        }
      }
    },
    // 点击节点
    handleNodeClick(obj) {
      // 赋值选择的地址
      setTimeout(() => {
        this.getAddrSelectTextSet()
      }, 1)
      this.statusBox = 1 // 设置为修改状态

      this.treeData.id = obj.pdCoreOrg.id
      this.treeData.parentId = obj.pdCoreOrg.parentId
      this.treeData.name = obj.pdCoreOrg.name
      this.treeData.orgType = obj.pdCoreOrg.orgType

      // 赋值级联菜单
      this.selectValue = [
        parseInt(obj.pdCoreOrg.provinceId),
        parseInt(obj.pdCoreOrg.cityId),
        parseInt(obj.pdCoreOrg.countyId)
      ]

      this.treeData.provinceId = this.selectValue[0]
      this.treeData.cityId = this.selectValue[1]
      this.treeData.countyId = this.selectValue[2]

      this.treeData.address = obj.pdCoreOrg.address
      this.treeData.contractNumber = obj.pdCoreOrg.contractNumber
      this.treeData.abbreviation = obj.pdCoreOrg.abbreviation
      this.treeData.orgDescribe = obj.pdCoreOrg.orgDescribe
      this.treeData.status = obj.pdCoreOrg.status ? 1 : 0
      this.treeData.sortValue = obj.pdCoreOrg.sortValue
    },
    // 新增按钮
    insertButton() {
      let tree = this.$refs.tree; // 获取元素
      let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys()) // 获取选中的id
      if (array.length <= 1) {
        this.statusBox = 0 // 状态切换为新增
        this.treeData.id = null // 清空编辑遗留的id
        this.treeData.parentId = array[0] == undefined ? 0 : array[0]// 设置父id
        this.treeData.name = null
        this.treeData.orgType = null
        this.treeData.provinceId = null
        this.treeData.cityId = null
        this.treeData.countyId = null
        this.treeData.address = null
        this.treeData.contractNumber = null
        this.treeData.abbreviation = null
        this.treeData.orgDescribe = null
        this.treeData.status = 1
        this.treeData.sortValue = 1
        this.selectValue = [] // 清空选择地址
        this.selectAddrText = null
      } else {
        this.$message({
          message: '最多选中一项',
          type: 'warning'
        });
      }
    },
    // tree选中事件
    treeCheck() {
      let tree = this.$refs.tree; // 获取元素
      let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys()) // 获取选中的id
      if (array.length > 0 && array.length <= 1) {
        this.treeData.parentId = array[0]
      } else {
        this.treeData.parentId = 0
      }
    },
    // 修改
    updateButton() {
      this.treeData.address = `${this.treeData.address == null ? "" : this.treeData.address}`
      this.$store.commit("startAnimation", true);
      organizationAPI.updateAggData(this.treeData).then(({data}) => {
        if (data.code === 200) {
          this.$message({
            message: data.message,
            type: 'success'
          });
          this.$store.commit("startAnimation", false);
          this.initData();
          this.statusBox = -1
        }
      })
    },
    // 添加
    addButton() {
      this.treeData.address = `${this.treeData.address == null ? "" : this.treeData.address}`
      this.$store.commit("startAnimation", true);
      organizationAPI.insertAggdata(this.treeData).then(({data}) => {
        this.$store.commit("startAnimation", false);
        if (data.code === 200) {
          this.$message({
            message: data.message,
            type: 'success'
          });
          this.initData();
          this.statusBox = -1
        }
      })
    },
    // 删除
    deleteButton() {
      let tree = this.$refs.tree; // 获取元素
      let array = tree.getCheckedKeys().concat(tree.getHalfCheckedKeys()) // 获取选中的id
      if (array.length > 0) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          organizationAPI.deleteData({"idList": array}).then(({data}) => {
            if (data.code === 200) {
              this.$message({
                message: data.message,
                type: 'success'
              });
              this.initData();
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      } else {
        this.$message({
          message: '请选择删除项',
          type: 'warning'
        });
      }
    }
  },
  created() {
    this.initData();
    // 拉取级联菜单数据
    organizationAPI.getPdAreaTree().then(({data}) => {
      this.selectDg(data.data)
      this.addressesSelect = data.data
    })
  }
}
</script>
<style></style>
